<template>
  <div>
    <div
      v-for="(item, index) in list"
      :key="index"
      class="cardList mx-auto py-16px"
      @click="Details(item)"
    >
      <div class="text-16px mx-12px font-semibold">
        {{ item.name }}({{ item.id }})
      </div>
      <div class="center flex justify-between items-center mx-12px relative">
        <div class="flex justify-between items-center">
          <div
            class="flex flex-col items-center ml-12px"
            style="width: 98px; align-items: baseline"
          >
            <div class="title">最新跟进状态</div>
            <div class="val">{{ item.lastFollowUpStatusStr }}</div>
          </div>
          <span class="line"></span>
          <div
            class="flex flex-col justify-between items-center ml-28px"
            style="align-items: baseline"
          >
            <div class="title">商机状态</div>
            <div class="val">{{ item.businessOpportunityStatusStr }}</div>
          </div>
        </div>
        <vanButton
          round
          type="info"
          class="button"
          @click.stop="operate(item, 'operateFun')"
          v-if="filterType('info')"
          >{{ Info[active].btview }}</vanButton
        >
        <div
          class="wqsj"
          v-if="filterType('wqsj')"
          :class="'wqsj' + item.showType"
        >
          {{ item.showTypeStr }}
        </div>
        <div
          v-if="active === 'dropBusiness' && !loading"
          class="dropBusiness px-8px pt-3px"
          :class="'drop' + item.dropType"
        >
          {{ item.dropTypeStr }}
        </div>
      </div>
      <!-- 右侧操作按钮 -->
      <span class="type_top mx-12px" :class="'dataStatus' + item.dataStatus">{{
        item.dataStatusStr
      }}</span>
      <div class="mt-7px mx-12px">
        <span class="tab" v-if="item.address">{{ item.address }}</span>
        <span class="tab" v-if="item.category">{{ item.category }}</span>
        <span class="tab" v-if="item.type">{{ item.type }}</span>
        <span class="tab" v-if="item.store">{{ item.store }}</span>
        <span class="tab" v-if="item.kp">{{ item.kp }}</span>
      </div>
      <div
        class="bottomOption flex justify-center items-center mt-16px"
        v-if="filterType('TemporaryLibrary')"
      >
        <div
          class="option"
          @click.stop="operate(item, 'moveFun', '解绑到公海')"
        >
          解绑到公海
        </div>
        <span class="line" v-if="item.businessOpportunityStatus != 1"></span>
        <div
          class="option"
          v-if="item.businessOpportunityStatus != 1"
          @click.stop="operate(item, 'tempMoveprivateFun', '移入私海')"
        >
          移入私海
        </div>
      </div>
      <div
        class="bottomOption flex justify-center items-center mt-16px"
        v-if="filterType('PrivateSea')"
      >
        <div
          class="option"
          @click.stop="operate(item, 'tempMoveTempFun', '下放到临时库')"
        >
          解绑到公海
        </div>

        <div
          @click.stop="Certification(item)"
          v-if="filterType('Signin', item)"
          class="flex"
        >
          <span class="line"></span>
          <div class="option">入驻签约</div>
        </div>

        <div
          v-show="
            (item.businessOpportunityStatus === 2 ||
              item.businessOpportunityStatus === 5) &&
            item.lastFollowUpStatus === 4
          "
          @click.stop="
            approve(
              `/pages/dashboard/merchantManage/certifyMerchant/index?merchantId=${
                item.merchantId ? item.merchantId : ''
              }&businessOpportunityId=${item.id}`
            )
          "
          class="flex"
        >
          <span
            :class="
              handleLinePadding(
                (item.businessOpportunityStatus === 2 ||
                  item.businessOpportunityStatus === 5) &&
                  item.lastFollowUpStatus === 4
              )
            "
          ></span>
          <div class="option">认证商家</div>
        </div>

        <div
          @click.stop="paperContract(item)"
          v-if="filterType('paperContract', item)"
          class="flex"
        >
          <span
            :class="
              handleLinePadding(
                (item.businessOpportunityStatus === 2 ||
                  item.businessOpportunityStatus === 5) &&
                  item.lastFollowUpStatus === 4
              )
            "
          ></span>
          <div class="option">纸质合同签约</div>
        </div>
      </div>
      <div
        v-if="active === 'OuterZone'"
        class="addInfo mx-12px mt-14px"
        v-show="item.addInfo"
      >
        {{ item.addInfo }}
      </div>
    </div>
    <actionPopup
      ref="actionPopup"
      @confirm="confirmBut"
      :content="actionP.content"
      :confirmText="actionP.confirmText"
      :showButtons="actionP.showButtons"
      :title="actionP.title"
    ></actionPopup>
  </div>
</template>
<script>
import { Button as vanButton, Toast } from "vant";
import actionPopup from "@/components/ll-action-popup";
import {
  bindTemp, //公海绑定到临时库
  highSeaMovePrivate, //公海绑定到私海
  silenceMove,
  tempMove,
  tempMoveprivate,
  tempMoveTemp,
  businessis_sign,
} from "@/services/business/HighSeas.js";
export default {
  props: {
    list: {
      type: Array,
    },
    active: {
      type: String,
    },
    loading: {
      type: Boolean,
    },
  },
  components: {
    vanButton,
    actionPopup,
  },
  data() {
    return {
      Info: {
        HighSeas: {
          type: 0, //公海
          btview: "绑到临时库",
          operateFun: bindTemp,
          totab: "TemporaryLibrary",
        },
        //  HighSeas: {
        //   type: 0, //公海
        //   btview: "绑到私海",
        //   operateFun: publicMovePrivate,
        //   totab: "TemporaryLibrary",
        // },
        SilentLibrary: {
          type: 1, //沉寂库
          btview: "移到公海",
          operateFun: silenceMove,
          totab: "HighSeas",
        },
        // TemporaryLibrary: {
        //   type: 2, //临时库
        //   btview: "解绑到公海",
        //   moveFun: tempMove, //临时库移入公海
        //   tempMoveprivateFun: tempMoveprivate, //临时库移入私海
        // },
        PrivateSea: {
          type: 3, //私海
          btview: "下放到临时库",
          tempMoveTempFun: tempMoveTemp, //私海下放至临时库
          totab: "TemporaryLibrary",
        },
        // PrivateSea: {
        //   type: 3, //私海
        //   btview: "解绑到公海",
        //   tempMoveTempFun: tempMoveTemp, //私海解绑至公海
        //   totab: "TemporaryLibrary",
        // },
        OuterZone: {
          type: 4, //外区商机
          btview: "外区BD录入",
        },
      },
      actionP: {
        title: "绑定到临时库",
        content: "",
        confirmText: "确认绑定",
        showButtons: "operate",
      },
      activeItem: {},
      activeFun: null, //将要执行的方法名
      per: "",
      linePadding: "line",
    };
  },
  mounted() {
    this.per = localStorage.getItem("permission");
  },
  methods: {
    approve(path, type, id) {
      //1 认证商家   2  发起入驻签约   3  纸质合同签约
      if (type === 2) {
        businessis_sign({ id }).then((res) => {
          if (res) {
            Toast("该商机已签约");
          } else {
            uni.webView.getEnv((res) => {
              if (res.plus) {
                ({ url: path });
              } else {
                Toast("请在OAAPP环境下运行");
              }
            });
          }
        });
      } else if (type === 3) {
        businessis_sign({ id }).then((res) => {
          if (res) {
            Toast("该商机已签约");
          } else {
            uni.webView.getEnv((res) => {
              if (res.plus) {
                uni.navigateTo({ url: path });
              } else {
                Toast("请在OAAPP环境下运行");
              }
            });
          }
        });
      } else {
        uni.webView.getEnv((res) => {
          if (res.plus) {
            uni.navigateTo({ url: path });
          } else {
            Toast("请在OAAPP环境下运行");
          }
        });
      }
    },
    // 入驻跳转
    Certification(item) {
      if (item.contractId) {
        if (item.contractStatus === 0) {
          // 草稿
          // 编辑
          this.approve(
            `/pages/dashboard/contractManage/settlementContract/createOrEdit?contractId=${
              item.contractId
            }&merchantId=${
              item.merchantId ? item.merchantId : ""
            }&businessOpportunityId=${item.id}`,
            2,
            item.id
          );
        } else if (item.contractStatus === 5 || item.contractStatus === 6) {
          // 驳回作废
          // 新增
          this.approve(
            `/pages/dashboard/contractManage/settlementContract/contractedMerchant?merchantId=${
              item.merchantId ? item.merchantId : ""
            }&businessOpportunityId=${item.id}`,
            2,
            item.id
          );
        }
      } else {
        // 新增
        this.approve(
          `/pages/dashboard/contractManage/settlementContract/contractedMerchant?merchantId=${
            item.merchantId ? item.merchantId : ""
          }&businessOpportunityId=${item.id}`,
          2,
          item.id
        );
      }
    },
    // 纸质合同签约跳转
    /**
     * 新增商户页面：pages/dashboard/merchantManage/addMerchant/addEdit?businessLine=1
     * 商家信息页面：pages/dashboard/contractManage/productContract/createPage       参数：id、merchantId、isCopy、isEidt、rangeValue
     */
    paperContract(item) {
      if (item.contractId) {
        if (item.contractStatus === 0) {
          // 草稿
          // 编辑
          this.approve(
            `/pages/dashboard/contractManage/settlementContract/createOrEdit?contractId=${
              item.contractId
            }&merchantId=${
              item.merchantId ? item.merchantId : ""
            }&businessOpportunityId=${item.id}`,
            3,
            item.id
          );
        } else if (item.contractStatus === 5 || item.contractStatus === 6) {
          // 驳回作废
          // 新增
          this.approve(
            `/pages/dashboard/contractManage/settlementContract/contractedMerchant?merchantId=${
              item.merchantId ? item.merchantId : ""
            }&businessOpportunityId=${item.id}`,
            3,
            item.id
          );
        }
      } else {
        // 查看商机是否绑定店铺
        if (item.store === "0个店铺") {
          // 新增店铺
          this.approve(
            `pages/dashboard/merchantManage/addMerchant/addEdit?businessLine=1&merchantId=${
              item.merchantId ? item.merchantId : ""
            }&businessOpportunityId=${item.id}`,
            3,
            item.id
          );
        } else {
          // 新增合同
          this.approve(
            `/pages/dashboard/contractManage/settlementContract/contractedMerchant?merchantId=${
              item.merchantId ? item.merchantId : ""
            }&businessOpportunityId=${item.id}`,
            3,
            item.id
          );
        }
      }
    },
    filterType(name, item) {
      // if (this.per === "lead") return false;
      if (name === "Signin") {
        // 发起入驻签约
        if (
          item.businessOpportunityStatus === 3 ||
          item.businessOpportunityStatus === 5
        ) {
          if (item.contractId) {
            if (
              item.contractStatus === 0 ||
              (item.contractStatus === 6 && item.contractStatus === 5)
            ) {
              return true;
            }
            return false;
          }
          return true;
        }
        return false;
      } else if (name === "info") {
        if (
          ((this.active === "HighSeas" &&
            (this.per === "bd" ||
              this.per === "manage" ||
              this.per === "lead")) ||
            this.active === "SilentLibrary") &&
          !this.loading
        ) {
          return true;
        }
        return false;
      } else if (name === "wqsj") {
        // 外区商机
        if (this.active === "OuterZone" && !this.loading) return true;
        return false;
      } else if (name === "TemporaryLibrary") {
        // 临时库
        if (this.active === "TemporaryLibrary" && !this.loading) return true;
        return false;
      } else if (name === "PrivateSea") {
        // 私海
        if (this.active === "PrivateSea" && !this.loading) return true;
        return false;
      } else if (name === "paperContract") {
        // 纸质合同签约
        if (item.businessOpportunityStatus === 2) {
          if (item.contractId) {
            if (
              item.contractStatus === 0 ||
              (item.contractStatus === 6 && item.contractStatus === 5)
            ) {
              return true;
            }
            return false;
          }
          return true;
        }
      }
      return false;
    },
    // 公海绑定临时库 沉寂库移入公海
    get_fn(fn, data) {
      fn(data)
        .then(() => {
          Toast("操作成功");
          let val;
          if (this.active === "TemporaryLibrary") {
            if (this.activeFun === "moveFun") {
              val = "HighSeas";
            } else {
              val = "PrivateSea";
            }
          } else {
            val = this.Info[this.active].totab;
          }
          let a = this.Info[this.active];
          if (a.type === 0 || a.type === 2 || a.type === 3) {
            this.$emit("updatafalling");
          }
          this.$emit("update", val);
        })
        .catch((err) => {
          Toast(err.errMessage || err.message);
        });
    },
    // 点击详情
    Details(val) {
      this.$emit("Details", val);
    },
    // 点击按钮
    operate(item, funName, poname) {
      this.activeItem = item;
      this.activeFun = funName;
      if (this.Info[this.active].type === 0) {
        // 公海
        this.actionP.content = `确定将“${item.name}”绑定到临时库?`;
        // this.actionP.content = `确定将“${item.name}”绑定到私海?`;
        this.actionP.confirmText = "确认绑定";
        this.actionP.title = this.Info[this.active].btview;
      } else if (this.Info[this.active].type === 1) {
        // 沉寂库
        this.actionP.content = `确定将“${item.name}”移到公海?`;
        this.actionP.confirmText = "确认移动";
        this.actionP.title = this.Info[this.active].btview;
      }
      // else {
      //   // 临时库
      //   this.actionP.title = poname;
      //   this.actionP.content = `确定将“${item.name}”${poname}?`;
      //   this.actionP.confirmText = "确认";
      // }
      this.openPopup();
    },
    openPopup() {
      this.$refs.actionPopup.open(this.actionP);
    },
    // 二次弹窗确认
    confirmBut() {
      let a = this.Info[this.active];
      if (a.type === 0 || a.type === 1) {
        // 绑定到临时库  // 移到公海
        this.get_fn(this.Info[this.active].operateFun, this.activeItem.id);
      } else {
        this.get_fn(this.Info[this.active][this.activeFun], this.activeItem.id);
      }
    },
    // 按钮动态padding
    handleLinePadding(isCertification) {
      if (isCertification) return "shortLine";
      return "line";
    },
  },
};
</script>

<style lang="scss" scoped>
.cardList {
  width: 355px;
  margin-top: 12px;
  background: #ffffff;
  border-radius: 10px;
  color: #333;
  position: relative;
  .center {
    width: 331px;
    height: 62px;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 11px 16px 13px 0;
    margin-top: 13px;
    .line {
      width: 1px;
      height: 32px;
      background-color: rgba(0, 0, 0, 0.12);
      // margin: 0 25px;
    }
    .title {
      font-size: 12px;
      color: #999999;
      line-height: 17px;
      margin-bottom: 4px;
    }
    .val {
      font-size: 12px;
      font-weight: 500;
      color: #333333;
      line-height: 17px;
    }
    .button {
      padding: 6px 12px;
      height: 29px;
      font-size: 12px;
      color: #ffffff;
    }
  }
  .tab {
    height: 20px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 10px;
    color: #999999;
    padding: 3px 6px;
    margin-right: 6px;
    white-space: nowrap;
  }
  .type_top {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 20px;
    background-size: cover;
    font-size: 10px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: 20px;
  }
  // 正常
  .dataStatus10 {
    background-image: url("@/assets/business/img_gsh_zc.png");
    color: #57ae59;
  }
  // 冻结
  .dataStatus20 {
    background-image: url("@/assets/business/img_gsh_dj.png");
    color: #f55f4e;
  }
  // 保护
  .dataStatus30 {
    background-image: url("@/assets/business/img_gsh_zc.png");
    color: #57ae59;
  }
  // 无效
  .dataStatus40 {
    background-image: url("@/assets/business/img_gsh_wx.png");
    color: #666666;
  }
  .bottomOption {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d6fe9;
    padding-top: 12px;
    border-top: 1px solid #f5f5f5;
    margin-bottom: -4px;
    .line {
      margin: 0 54px;
      width: 1px;
      height: 16px;
      background-color: #f5f5f5;
    }
    .shortLine {
      margin: 0 27px;
      width: 1px;
      height: 16px;
      background-color: #f5f5f5;
    }
    // .line {
    //   width: 1px;
    //   height: 16px;
    //   background-color: #f5f5f5;
    // }
  }
  .wqsj {
    width: 76px;
    height: 21px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 21px;
    text-align: center;
    top: 0;
    right: 0;
    position: absolute;
    background-size: 100% 100%;
    font-size: 10px;
  }
  .wqsj1 {
    background-image: url(@/assets/business/img_yyy1.png);
  }
  .wqsj2 {
    background-image: url(@/assets/business/img_yyy2.png);
  }
  .addInfo {
    font-size: 10px;
    font-weight: 400;
    color: #666666;
    padding-top: 8px;
    border-top: 1px solid #eeeeee;
    margin-bottom: -8px;
  }
  .dropBusiness {
    height: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    line-height: 18px;
    background-size: 100% 100%;
    position: absolute;
    right: -4px;
  }
  .drop1 {
    background-image: url(@/assets/business/img_gsh_bq.png);
  }
  .drop2 {
    background-image: url(@/assets/business/img_gsh_ddgh.png);
  }
}
</style>
